:root {
  --x-ping-result-scrollbar-bg: hsl(0 0% 0% / 0.5);
  --x-ping-item-bg: hsl(0 0% 0% / 0.1);
  @media (prefers-color-scheme: dark) {
    --x-ping-result-scrollbar-bg: hsl(0 0% 100% / 0.5);
    --x-ping-item-bg: hsl(0 0% 100% / 0.1);
  }
}
.itemContainer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
  grid-auto-flow: row;
  flex-grow: 1;
  gap: 0.15em;
  border-radius: var(--x-radius);
  background: var(--x-ping-item-bg);
  padding: var(--x-gutter-sm) var(--x-gutter);
  height: 7rem;
  overflow-y: auto;
  scrollbar-color: var(--x-ping-result-scrollbar-bg) transparent;
  list-style-type: none;
}
.resultContainer {
  display: grid;
  flex-grow: 1;
  gap: var(--x-gutter-sm);
}
.result {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
